<template>
    <div class="learning-app">
        <Header></Header>
        <Sidebar></Sidebar>
        <div class="learning-home">
            <div class="doc-content-wrapper">
                <div class="home-container">
                  <MetaInfo type="title"></MetaInfo>
                  <router-view></router-view>
                  <MetaInfo type="footer"></MetaInfo>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Header from '@/components/header/header.vue';
import Sidebar from '@/components/sidebar/sidebar.vue';
import MetaInfo from '@/components/metaInfo/metaInfo.vue';

</script>

<style scoped lang="scss">
.learning-app {
    width: 100%;
}

.learning-home {
    .doc-content-wrapper {
      --vp-content-width: calc(var(--vp-screen-max-width) - var(--vp-sidebar-width-small) - 64px);
      padding: 32px 24px 96px;

      .home-container {
        width: 100%;
        height: 100%;
        display: flow-root;
      }
    }

    @media screen and (min-width: 1440px) {
        .doc-content-wrapper .home-container {
            width: var(--vp-content-width)
        }
    }

    @media screen and (min-width: 768px) {
        .doc-content-wrapper {
            padding: 48px 32px 42px
        }
    }

    @media screen and (min-width: 960px) {
        .doc-content-wrapper {
            padding: 64px 64px 42px
        }
    }

    @media screen and (min-width: 1440px) {
        .doc-content-wrapper {
            padding: 64px 0 42px 64px;
            display: flex
        }
    }

    @media screen and (min-width: 1680px) {
        .doc-content-wrapper {
          padding: 64px 0 42px 64px;
          display: flex
        }
    }
}

@media screen and (min-width: 960px) {
    .learning-home {
        padding-top: var(--learning-header-height)
    }
    .learning-home {
        padding-left: calc(var(--sidebar-width-sm) + 10px)
    }
}

@media screen and (min-width: 960px) and (min-width: 1280px) {
    .learning-home {
        padding-left: calc(var(--vp-sidebar-width-small))
    }
}

@media screen and (min-width: 960px) and (min-width: 1440px) {
    .learning-home {
        padding-left: calc((100% - var(--vp-screen-max-width)) / 2 + var(--vp-sidebar-width-small))
    }
}
</style>
